<template>
<div>
    <div>
        <step :step="step" @update:step="stpeChanged" :btns="['第一步','第二步','第三步','最后一步']"/>
        <br>
        <div v-if="step==0">
            <div>
                商品名称:<input type="text" v-model.trim="form.goodsName"/>
            </div>
        </div>
        <div v-if="step==1">
            <div>
                价格:<input type="text" v-model.trim="form.price"/>
            </div>
        </div>
        <div v-if="step==2">
            <div>
                图片路径:<input type="text" v-model.trim="form.image"/>
            </div>
        </div>
        <div v-if="step==3">
            <div>
                库存量:<input type="text" v-model.trim="form.stock"/>
            </div>
        </div>

        <div>
            <button @click="step=step-1" v-if="step>0">上一步</button>
            <button @click="next" v-if="step<3">下一步</button>
            <button @click="submit" v-if="step==3">提交</button>
        </div>

        <div v-if="showForm">
            <div>
                商品名称：{{form.goodsName}}
            </div>
            <div>
                商品价格：{{form.price}}
            </div>
            <div>
                商品图片：{{form.image}}
            </div>
            <div>
                商品库存：{{form.stock}}
            </div>
            <button @click="reset">清空重填</button>
        </div>
    </div>
</div>
</template>

<script>
import Step from './step.vue'
export default {
 // 组件名称
 name: 'demo',
 // 组件参数 接收来自父组件的数据
 props: [],
 // 局部注册的组件
 components: {Step},
 // 组件状态值
 data () {
 return {
     form:{
         goodsName:'',
         price:'',
         image:'',
         stock:''
     },
     step:0,
     showForm:false
 }
 },
 // 计算属性
 computed: {},
 // 侦听器
 watch: {},
 // 组件方法
 methods: {
     submit(){
         if(this.step===3&&this.form.stock===''){
             alert('商品库存不能为空')
             return
         }
         this.showForm=true
     },
     stpeChanged(k){
         if(k<this.step){
             this.step=k
         }else if(k>this.step){
             this.next()
         }
     },
     next(){
         if(this.step===0&&this.form.goodsName===''){
             alert('商品名称不能为空')
             return
         }
         if(this.step===1&&this.form.price===''){
             alert('商品价格不能为空')
             return
         }
         if(this.step===2&&this.form.image===''){
             alert('商品图片不能为空')
             return
         }
         this.step++
     },
     reset(){
         this.form={
             goodsName:'',
             price:'',
             image:'',
             stock:0
         }
         this.step=0
         this.showForm=false
     }
 },
 created () {
 },

 mounted () {
 },
 
 updated () {
 },
 
}
</script> 


</style>
